<template>
    <div class="container">
        <el-row>
            <el-col :span="12">
                <el-input v-model="SearchVal" placeholder="Please input" class="input-width-select" @keyup.enter="enterSearch">
                    <template #append>
                        <!-- <el-button :icon="Search" @click="enterSearch"></el-button> -->
                    </template>
                </el-input>
            </el-col>
        </el-row>

        <el-col :span="12">
            <!-- 这个事增加 -->
            <el-button type="primary" @click="openAdd" >add</el-button>
            <!-- 这个是删除 -->
            <el-button type="danger" @click="onDel">delete</el-button>
        </el-col>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="date" label="Date" width="240" />
            <el-table-column prop="name" label="Name" width="150" />
            <el-table-column prop="order" label="Order" width="80" />
            <el-table-column prop="address" label="Address" />
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 这个地方加了一个分页得效果 -->
        <el-pagination background layoout="prev, pager, next" :total="total" @current-change="currentChange" />
    </div>
    <addVue :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></addVue>
</template>

<script lang="ts" setup>
// 下面这个是定义一个响应式得关键字
import { ref } from 'vue' 
// import { Search } from '@element-plus/icons-vue'
import addVue from '../components/add.vue'
import User from '../class/User';
import { ElMessage } from 'element-plus';
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    order: 1,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    order: 1,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    order: 1,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    order: 1,
    address: 'No. 189, Grove St, Los Angeles',
  },
];
const total = ref(100)
// 这是一个响应式得变量
const SearchVal=ref("")
//这是一个切换事件，这个会传一个参数得 number 就是记录每次传了第几页，到时候后端会接收这个的。
const currentChange=(val:number)=>{
    console.log(val)
}
//方法
const enterSearch=()=>{

}
const isShow = ref(false)
const openAdd=()=>{
    isShow.value = true
}
const onDel=()=>{

}
const closeAdd = () => {
    isShow.value = false
    info.value = new User()
}
const success = (message: string) => {
    isShow.value = false
    info.value = new User()
    ElMessage.success(message)
}
const info = ref<User>(new User())

const handleEdit=(index:number,row: User) => {
    console.log(index,row)
    info.value = row
    isShow.value=true
}
const handleDelete=(index:number,row: User) => {
    console.log(index,row)
}
</script>

<style lang="scss" scoped>
.container {
    margin: 100px auto;
    width: 50%;
}

.table {
    margin: 10px 0;
}

.el-table {
    border: 1px solid #ddd;
}

.el-table th {
    background-color: #f5f5f5;
}

.el-table td {
    padding: 10px;
}

.input-with-select {
    width: 380px;
    margin-right: 20px;
}
</style>
